<template>
  <div>
    <div class="title">{{title}}</div>
    <div class="content-padding">
      <div class="signUp">
        <a-row class="see_row" style="width:100%;">
          <a-form-model ref="ruleForm" class="ant-advanced-form" :model="data" :rules="rules"
            :labelCol="{ style: 'width:108px' }">
            <div class="colTitle">学生基本信息</div>
            <a-col class="borderCol">
              <a-form-model-item label="姓名" prop="name" class="form-w-95">
                <a-input class="baseCol" v-model="data.name" :maxLength="15" placeholder="请输入姓名" />
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="性别" prop="sex" class="form-w-95">
                <a-select placeholder="请选择性别" class="baseCol" v-model="data.sex">
                  <a-select-option v-for="(item, index) in sexList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="证件类型" prop="cardType" class="form-w-95">
                <a-select v-model="data.cardType" placeholder="请选择证件类型" class="baseCol">
                  <a-select-option v-for="(item, index) in cardList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="证件号码" prop="cardId" class="form-w-95" >
                <a-input class="baseCol" v-model.trim="data.cardId" placeholder="请输入证件号码" />
              </a-form-model-item>
            </a-col>
            <div class="colTitle">报考基本信息</div>
            <a-col class="borderCol">
              <a-form-model-item label="报名批次" prop="registerBatch" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择报名批次" allowClear v-model="data.registerBatch">
                  <a-select-option v-for="(item, i) in piciList" :key="i" :value="item.typeNameValue">{{ item.typeNameValue }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="报名院校" prop="registerSchool" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择报名院校" allowClear v-model="data.registerSchool">
                  <a-select-option v-for="(item, i) in xiaoList" :key="i" :value="item.typeNameValue">{{ item.typeNameValue }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- <a-col class="borderCol">
              <a-form-model-item label="所报层次" prop="registerLevel" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择所报层次" allowClear v-model="data.registerLevel">
                  <a-select-option v-for="(item, index) in cengciList" :key="index" :value="item.id">{{item.typeNameValue }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col> -->
            <a-col class="borderCol">
              <a-form-model-item label="所报层次" prop="registerLevel" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择所报层次" allowClear v-model="data.registerLevel">
                  <a-select-option v-for="(item, index) in cengciList" :key="index" :value="item.typeNameValue">{{item.typeNameValue }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="所报专业" prop="registerMajor" class="form-w-95" :colon="false">
                <a-input class="baseCol" :maxLength="15" v-model.trim="data.registerMajor" placeholder="请输入所报专业" />
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="学习形式" prop="studyType" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择学习形式" allowClear v-model="data.studyType">
                  <a-select-option v-for="(item, index) in xingshiList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="学生状态" prop="studentStatus" class="form-w-95">
                <a-select class="baseCol" placeholder="请选择学生状态" allowClear v-model="data.studentStatus">
                  <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.typeNameValue">{{item.typeNameValue}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <div class="colTitle">上传材料</div>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传正反面身份证" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <a-upload :accept="imageAccept" :action="uploadUrl" multiple list-type="picture-card"
                  :file-list="identityImgList" @preview="uploadImgPreview" :headers="uploadHead"
                  @change="uploadImgChangeId" :before-upload="beforeUpload" :data="additionalData" :remove="idDel">
                  <div v-if="(identityImgList.length < 2)">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传身份证图片</div>
                  </div>
                </a-upload>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传电子照片" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <a-upload :accept="imageAccept" :action="uploadUrl" list-type="picture-card"
                :file-list="selfImgList" @preview="uploadImgPreview" :headers="uploadHead"
                @change="uploadImgChangeSelf" :before-upload="beforeUpload" :data="additionalData" :remove="selfDel">
                <div v-if="(selfImgList.length < 1)">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传电子照片</div>
                </div>
              </a-upload>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传毕业证" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <a-upload :accept="imageAccept" :action="uploadUrl" list-type="picture-card"
                :file-list="graduationImgList" @preview="uploadImgPreview" :headers="uploadHead"
                @change="uploadImgChangeGraduation" :before-upload="beforeUpload" :data="additionalData" :remove="graduationDel">
                <div v-if="(graduationImgList.length < 1)">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传毕业证照片</div>
                </div>
              </a-upload>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传学信网电子注册备案表" prop="attachmentId" :labelCol="labelCol">
                <div class="uploadFile">
                  <template>
                    <a-upload-dragger name="file" :accept="docAccept" :action="uploadUrl" :before-upload="beforeRecordFormUpload" :remove="recordFormDel" :multiple="false" @change="handleChange" :customRequest="recordForm">
                      <p class="ant-upload-drag-icon">
                        <a-icon style="color:#C0C4CC;" type="cloud-upload" />
                      </p>
                      <p class="ant-upload-text" style="font-size:13px">
                        将文件拖到此处，或<span style="color:#5284FE;">点击上传</span>
                      </p>
                    </a-upload-dragger>
                  </template>
                  <div v-if="recordFormList.length > 0" class="float"></div>
                </div>
              </a-form-model-item>
            </a-col>
             <a-col class="borderColHeight">
              <a-form-model-item label="上传异地生证明材料" prop="attachmentId" :labelCol="labelCol">
                <div class="uploadFile">
                  <a-upload-dragger name="file" :accept="docAccept" :action="uploadUrl" :before-upload="beforeRecordFormUpload" :remove="nolocalProveDel" :multiple="false" @change="handleChange" :customRequest="nolocalProve">
                    <p class="ant-upload-drag-icon">
                      <a-icon style="color:#C0C4CC;" type="cloud-upload" />
                    </p>
                    <p class="ant-upload-text" style="font-size:13px">
                      将文件拖到此处，或<span style="color:#5284FE;">点击上传</span>
                    </p>
                  </a-upload-dragger>
                  <div v-if="nolocalProveList.length > 0" class="float"></div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传其他证明材料" prop="attachmentId" :labelCol="labelCol">
                <div class="uploadFile">
                  <a-upload-dragger name="file" :accept="docAccept" :action="uploadUrl" :before-upload="beforeRecordFormUpload" :remove="othersProveDel" :multiple="false" @change="handleChange" :customRequest="othersProve">
                    <p class="ant-upload-drag-icon">
                      <a-icon style="color:#C0C4CC;" type="cloud-upload" />
                    </p>
                    <p class="ant-upload-text" style="font-size:13px">
                      将文件拖到此处，或<span style="color:#5284FE;">点击上传</span>
                    </p>
                  </a-upload-dragger>
                  <div v-if="othersProveList.length > 0" class="float"></div>
                </div>
              </a-form-model-item>
            </a-col>
            <div class="colTitle">联系方式</div>
            <a-col class="borderCol">
              <a-form-model-item label="手机" prop="phone" class="form-w-95" :colon="false">
                <a-input class="baseCol" v-model.trim="data.phone" placeholder="请输入手机号" :max-length='11'/>
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="Email" prop="email" class="form-w-95" :colon="false">
                <a-input class="baseCol" v-model.trim="data.email" placeholder="请输入Email号" />
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="联系地址" prop="address" class="form-w-95" :colon="false">
                <a-input class="baseCol" v-model.trim="data.address" placeholder="请输入联系地址" />
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="联系电话" prop="connectPhone" class="form-w-95" :colon="false">
                <a-input class="baseCol" v-model.trim="data.connectPhone" placeholder="请输入联系电话" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24" class="borderCol" style="border-bottom:none">
              <div style="width:100%;text-align:center;">
                <a-button type="primary" @click="handleOk">确定</a-button>
                <!-- <a-button style="margin-left:20px;" @click="handleOk">返回</a-button> -->
              </div>
            </a-col>
          </a-form-model>

        </a-row>
      </div>
    </div>
    <imgPreview v-model="preview.visible" :imgList="[preview.image]" />
  </div>

</template>

<script>
import { imageAccept, docAccept } from '@/utils/options.js'
import { getAuthorizationHead } from '@/utils/request.js'
import { getBase64 } from '@/utils/util.js'
import imgPreview from '@/components/img-preview'
import { addStudent, typeList, uploadImg } from '@/services/adminApi'
const BASE_URL = process.env.VUE_APP_API_URL
export default {
  name: 'offlineData',
  components: {
    imgPreview
  },
  data () {
    return {
      labelCol: {
        style: 'width:140px;white-space:normal'
      },
      flag: false,
      id: null,
      type: 1,
      BASE_URL,
      imageAccept,
      docAccept,
      uploadBaseUrl: `${BASE_URL}/files/`,
      uploadHead: getAuthorizationHead(),
      preview: {
        visible: false,
        image: ''
      },
      brandOptions: [],
      deviceOptions: [],
      title: '添加新名单',
      data: {

      },
      sexList: [],
      cardList: [],
      piciList: [],
      xiaoList: [],
      cengciList: [],
      xingshiList: [],
      statusList: [],
      rules: {
        name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        // cardType: [{ required: true, message: '请选择设证件类型', trigger: 'change' }],
        // cardId: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
        // registerBatch: [{ required: true, message: '请选择报名批次', trigger: 'change' }],
        // registerSchool: [{ required: true, message: '请选择报名院校', trigger: 'change' }],
        // registerLevel: [{ required: true, message: '请选择所报层次', trigger: 'change' }],
        // registerMajor: [{ required: true, message: '请输入所报专业', trigger: 'blur' }],
        // studyType: [{ required: true, message: '请选择习形式', trigger: 'change' }],
        // studentStatus: [{ required: true, message: '请选择学生状态', trigger: 'change' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      },
      fileList: [],
      identityImgList: [],
      identityImgUrlList: [],
      selfImgList: [],
      graduationImgList: [],
      recordFormList: [],
      nolocalProveList: [],
      othersProveList: [],
      loading: '',
      imageUrl: '',
      additionalData: {
        name: ''
      }
    }
  },
  created () {
    this.getInit()
    this.uploadUrl = uploadImg()
  },
  methods: {
    // 初始化获取下拉菜单列表
    getInit () {
      this.getSex()
      this.getCard()
      this.getPici()
      this.getXuexiao()
      this.getCengci()
      this.getXingshi()
      this.getStatus()
    },
    async getSex () {
      const res = await typeList({ type: 1 })
      const { success, data: response, msg } = res
      if (success) {
        this.sexList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCard () {
      const res = await typeList({ type: 2 })
      const { success, data: response, msg } = res
      if (success) {
        this.cardList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getPici () {
      const res = await typeList({ type: 3 })
      const { success, data: response, msg } = res
      if (success) {
        this.piciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXuexiao () {
      const res = await typeList({ type: 4 })
      const { success, data: response, msg } = res
      if (success) {
        this.xiaoList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCengci () {
      const res = await typeList({ type: 5 })
      const { success, data: response, msg } = res
      if (success) {
        this.cengciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXingshi () {
      const res = await typeList({ type: 6 })
      const { success, data: response, msg } = res
      if (success) {
        this.xingshiList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getStatus () {
      const res = await typeList({ type: 7 })
      const { success, data: response, msg } = res
      if (success) {
        this.statusList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    // 上传后预览图片
    async uploadImgPreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.preview.image = file.url || file.preview
      this.preview.visible = true
    },
    // 上传前添加参数
    beforeUpload (file) {
      console.log(file)
      if (this.data.name === '' || this.data.name === undefined) {
        this.$message.newFun('请输入姓名后再点击上传', 'error', 3)
        return
      }
      this.additionalData.name = this.data.name
    },
    // 上传身份证图片
    uploadImgChangeId ({ fileList }) {
      this.identityImgList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.identityImgList.length; i++) {
        const d = this.identityImgList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.success) {
            if (d.size > 1024 * 1024 * 20) {
              this.$message.newFun('上传文件大小不能超过20MB', 'error', 3)
              this.identityImgList.splice(i, 1)
            } else {
              this.identityImgList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: i,
                url: this.uploadBaseUrl + d.response.data
              })
              this.identityImgUrlList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: i,
                url: d.response.data
              })
            }
          } else {
            this.identityImgList.splice(i, 1)
            this.identityImgUrlList.splice(i, 1)
            this.$message.newFun(d.response.message, 'error', 3)
          }
        }
      }
    },
    idDel (file) {
      this.identityImgList = this.identityImgList.filter(item => item.id !== file.id)
      this.identityImgUrlList = this.identityImgUrlList.filter(item => item.id !== file.id)
    },
    // 上传电子照片
    uploadImgChangeSelf ({ fileList }) {
      this.selfImgList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.selfImgList.length; i++) {
        const d = this.selfImgList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.success) {
            if (d.size > 1024 * 1024 * 20) {
              this.$message.newFun('上传文件大小不能超过20MB', 'error', 3)
              this.selfImgList.splice(i, 1)
            } else {
              this.selfImgList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: '',
                url: this.uploadBaseUrl + d.response.data
              })
              this.data.selfImgUrls = d.response.data
            }
          } else {
            this.selfImgList.splice(i, 1)
            this.data.selfImgUrls = ''
            this.$message.newFun(d.response.message, 'error', 3)
          }
        }
      }
    },
    selfDel () {
      this.selfImgList = []
      this.data.selfImgUrls = ''
    },
    // 上传毕业证
    uploadImgChangeGraduation ({ fileList }) {
      this.graduationImgList = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.graduationImgList.length; i++) {
        const d = this.graduationImgList[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.success) {
            if (d.size > 1024 * 1024 * 20) {
              this.$message.newFun('上传文件大小不能超过20MB', 'error', 3)
              this.graduationImgList.splice(i, 1)
            } else {
              this.graduationImgList.splice(i, 1, {
                name: d.name,
                status: d.status,
                type: d.type,
                uid: d.uid,
                id: '',
                url: this.uploadBaseUrl + d.response.data
              })
              this.data.graduationImgUrls = d.response.data
            }
          } else {
            this.graduationImgList.splice(i, 1)
            this.data.graduationImgUrls = ''
            this.$message.newFun(d.response.message, 'error', 3)
          }
        }
      }
    },
    graduationDel () {
      this.graduationImgList = []
      this.data.graduationImgUrls = ''
    },
    // 上传文件
    beforeRecordFormUpload (file) {
    },
    handleChange (info) {
      const { status } = info.file
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        console.log('上传成功')
      } else if (status === 'error') {
        console.log('上传失败')
      }
    },
    // 上传学信网电子注册备案表
    recordForm (options) {
      if (this.data.name === '' || this.data.name === undefined) {
        this.$message.newFun('请输入姓名后再点击上传', 'error', 3)
        this.recordFormDel()
        return
      }
      var axios = require('axios')
      const formData = new FormData()
      formData.append('file', options.file) // 这里添加文件
      formData.append('name', this.data.name) // 这里添加额外参数
      // 使用 axios 发送请求
      axios.post(options.action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
        // onUploadProgress: progressEvent => {
        //   if (options.onProgress) {
        //     options.onProgress({
        //       percent: (progressEvent.loaded / progressEvent.total) * 100
        //     })
        //     this.$message.newFun('上传成功', 'success', 3)
        //   }
        // }
      }).then(response => {
        // 成功处理逻辑
        this.$message.newFun('上传成功', 'success', 3)
        options.onSuccess(response.data, this.data.name)
        this.recordFormList.push(response.data)
        this.data.recordFormUrls = response.data
      }).catch(error => {
        // 错误处理逻辑
        options.onError(error)
      })
    },
    // 删除
    recordFormDel () {
      this.recordFormList = []
      this.data.recordFormUrls = ''
    },
    // 上传异地生证明材料
    nolocalProve (options) {
      if (this.data.name === '' || this.data.name === undefined) {
        this.$message.newFun('请输入姓名后再点击上传', 'error', 3)
        this.recordFormDel()
        return
      }
      var axios = require('axios')
      const formData = new FormData()
      formData.append('file', options.file) // 这里添加文件
      formData.append('name', this.data.name) // 这里添加额外参数
      // 使用 axios 发送请求
      axios.post(options.action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 成功处理逻辑
        this.$message.newFun('上传成功', 'success', 3)
        options.onSuccess(response.data, this.data.name)
        this.nolocalProveList.push(response.data)
        this.data.nolocalProveUrls = response.data
      }).catch(error => {
        // 错误处理逻辑
        options.onError(error)
      })
    },
    // 异地生删除
    nolocalProveDel () {
      this.nolocalProveList = []
      this.data.nolocalProveUrls = ''
    },
    // 上传其他证明材料
    othersProve (options) {
      if (this.data.name === '' || this.data.name === undefined) {
        this.$message.newFun('请输入姓名后再点击上传', 'error', 3)
        this.recordFormDel()
        return
      }
      var axios = require('axios')
      const formData = new FormData()
      formData.append('file', options.file) // 这里添加文件
      formData.append('name', this.data.name) // 这里添加额外参数
      // 使用 axios 发送请求
      axios.post(options.action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 成功处理逻辑
        this.$message.newFun('上传成功', 'success', 3)
        options.onSuccess(response.data, this.data.name)
        this.othersProveList.push(response.data)
        this.data.othersProveUrls = response.data
      }).catch(error => {
        // 错误处理逻辑
        options.onError(error)
      })
    },
    // 其他删除
    othersProveDel () {
      this.othersProveList = []
      this.data.othersProveUrls = ''
    },
    handleOk () {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          if (!this.identityImgUrlList) {
            this.data.identityImgUrls = null
            } else if (this.identityImgUrlList.length < 2) {
            this.data.identityImgUrls = this.identityImgUrlList[0]
            } else if (this.identityImgUrlList.length >= 2) {
            this.data.identityImgUrls = this.identityImgUrlList.map(item => item.url).join()
          }
          this.addDeviceStore()
        }
      })
    },
    async addDeviceStore () {
      const res = await addStudent(this.data)
      if (res.success) {
        this.$message.newFun('新增成功', 'success', 3)
        window.open('/#/sales/salesManager/deviceBackRepair', '_self')
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.baseCol {
  width: 100%;
  min-width: 200px;
}
.imgsDiv{
  position: relative;
  padding-left:15px;
  width:90px;
  &::before{
    content: '*';
    position: absolute;
    top: 5px;
    left: 5%;
    color:#f5222d;
  }
}
.title {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  color: #333333;
  line-height: 28px;
  padding-top: 20px;
  padding-left: 20px;
}
.signUp{
  width: 1190px;
  /*margin: 20px auto 0;*/
  min-height: 360px;
  border: 1px solid #d1d4d7;
  .colTitle{
    padding: 0 20px;
    box-sizing: border-box;
    height:50px;
    line-height:50px;
    background: #2a868e;
    color: #fff;
    border: 1px solid #2a868e;
  }
  .borderCol{
    height: 64px;
    padding-top: 14px;
    padding-right: 14px;
    margin-bottom: 0!important;
    border-bottom: 1px solid #d1d4d7;
  }
  .borderColHeight {
    min-height: 154px;
    padding-top: 14px;
    margin-bottom: 0!important;
    border-bottom: 1px solid #d1d4d7;
  }
}
.uploadFile{
  position: relative;
  .float {
    width: 200px;
    height: 121px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
}
</style>
